<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>员工管理页面</title>
    <%-- jQuery --%>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js" ></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />


     <%-- 页面数据, 页面加载完后执行 --%>
    <script>
        /**用于存储数据总数*/
        var total;
        /**用于存储当前页码*/
        var currentNum;

        /****
            待到页面加载完毕后就发送ajax请求
        */
        $(function(){
            /**页面加载完毕就发送请求*/
            ajaxPost(1);

            /*****************    新增模态   方法分割线*****************/

            /**
                绑定新增按钮模态
             */
            $("#insert_model_btn").click(function () {
                /*发送ajax请求获取职位的信息*/
                getDeptInfos("#dept_name", null);

                /*召唤模态框*/
                $("#insert_model").modal({
                    backdrop:"static"
                });
            });


            /**
                查询部门表职位的ajax, 并将数据发送给相应的地方
             */
            function getDeptInfos(eleId, content){
                $.ajax({
                    url:"${pageContext.request.contextPath}/dept/findAll",
                    type:"GET",
                    success:function (result) {
                        /*将获取到的数据封装到select标签中*/
                        build_dept_info(result, eleId, content);
                    }
                });
            }

            /**
                用于获取职业数据信息并封装到select标签中
             */
            function build_dept_info(result, eleId, content){
                /*获取标签*/
                var selectEle = $(eleId);
                /*清空标签中的数据*/
                selectEle.empty();
                /*获取数据内容*/
                var deptInfo = result.data.department;
                /*遍历循环获取信息*/
                $.each(deptInfo, function(index, item){
                    var optionEle;
                    /*判断如果传过来的内容不是空的, 那么就进行信息的筛选*/
                    if( content ){
                        /*判断内容是否匹配该职位*/
                        if( content == item.deptName ){
                            /*职位匹配上了, 那么就显示它*/
                            optionEle = $("<option></option>")
                                .append(item.deptName)
                                .attr("value", item.deptId)
                                .attr("selected", "selected");
                        }else{
                            optionEle = $("<option></option>")
                                .append(item.deptName)
                                .attr("value", item.deptId);
                        }
                    }else{
                        optionEle = $("<option></option>")
                            .append(item.deptName)
                            .attr("value", item.deptId);
                    }
                    selectEle.append(optionEle);
                });
            }

            /**
                模态框新增提交按钮的点击事件
             */
            $("#insert_submit_btn").click(function(){
                /*发送ajax请求*/
                $.ajax({
                    url:"${pageContext.request.contextPath}/emp",
                    type:"POST",
                    data:$("#insert_emp_form").serialize(),
                    success:function (result) {
                        alert(result.message);
                        /*关闭模态框*/
                        $("#insert_model").modal("hide");
                        /*发送请求重新获取页面数据*/
                        ajaxPost(total);
                    }
                });
            });

            /*****************    编辑模块   方法分割线*****************/

            /**
                绑定编辑按钮模态
             */
            $(document).on("click",".update_emp_btn" , function () {
                /*发送ajax请求获取职位的信息*/
                getEmp( $(this).attr("emp-id") );

                /*将用户的id存储到更新按钮的属性中*/
                $("#update_submit_btn").attr("emp-id", $(this).attr("emp-id") );

                /*召唤模态框*/
                $("#update_model").modal({
                    backdrop:"static"
                });
            });

            /**
                ajax请求: 根据id获取员工的信息
             */
            function getEmp(id){
                $.ajax({
                    url:"${pageContext.request.contextPath}/emp/" + id,
                    type:"GET",
                    success:function (result) {
                        /*将获取到的数据回显到模态框中*/
                        build_update_content(result);
                    }
                });
            }

            /**
                将数据回显到模态框中
             */
            function build_update_content(result){
                /*获取数据*/
                var info = result.data.employee;
                /*回显数据  姓名*/
                $("#empName_update_input").text(info.empName);
                /*回显数据  性别*/
                $("#update_emp_form input[name=gender]").val([info.gender]);
                /*回显数据  邮箱*/
                $("#empEmail_update_input").val(info.email);
                /*回显数据  职位
                    这个比较特别, 要回显所有职位的同时, 显示当前职位*/
                /*发送ajax请求获取职位的信息*/
                getDeptInfos("#dept_update_name", info.department.deptName);
            }

            /**
                更新按钮的点击事件
             */
            $("#update_submit_btn").click(function(){
                /*ajax: 根据id来进行用户的数据更新*/
                $.ajax({
                   url:"${pageContext.request.contextPath}/emp/" + $("#update_submit_btn").attr("emp-id"),
                   type:"PUT",
                   data:$("#update_emp_form").serialize(),
                   success:function (result) {
                       /*处理信息回显, 以及对页面进行刷新*/
                       alert(result.message);
                       /*关闭模态框*/
                       $("#update_model").modal("hide");
                       /*发送请求重新获取页面数据*/
                       ajaxPost(currentNum);
                   }
                });
            });

            /*****************    删除单个用户  方法分割线*****************/

            /**
                删除单个用户按钮的点击事件
             */
            $(document).on("click", ".delete_emp_btn", function(){
                /*弹窗提醒用户是否确认删除*/
                if( confirm( "确认删除【" + $(this).attr("emp-name") + "】用户吗?" ) ){
                    /*确认删除， 发送ajax请求*/
                    $.ajax({
                       url:"${pageContext.request.contextPath}/emp/" + $(this).attr("emp-id"),
                       type:"DELETE",
                       success:function(result){
                           /*弹出提示*/
                           alert(result.message);
                           /*刷新页面*/
                           ajaxPost(currentNum);
                       }
                    });
                }
                return false;
            });

            /*****************    删除多个用户  方法分割线*****************/

            /**
                选中多个用户按钮的点击事件
             */
            $("#ids_check_btn").click(function () {
                /*点击了就把相同name的check按钮点亮*/
                $(".id_check_btn").prop("checked", this.checked);
            });

            /**
                监测点击的按钮个数是否是全选， 是就将第一个按钮点亮
             */
            $(document).on("click", ".id_check_btn", function(){
                /*利用选择器计算checkbox中的选中个数*/
                if( $(".id_check_btn:checked").length === $(".id_check_btn").length ){
                    /*全选中那么就把第一个全选按钮选中*/
                    $("#ids_check_btn").prop("checked", true);
                }else{
                    /*不是全选中状态就将第一个按钮取消选中*/
                    $("#ids_check_btn").prop("checked", false);
                }
                // /*获取所有的checkbox*/
                // var checkbox = $(".id_check_btn");
                // var checkLength = checkbox.length;
                // /*遍历是否都是选中状态*/
                // $.each(checkbox, function (index, item) {
                //     /*如果是true, 选中状态*/
                //     if( item.checked  ){
                //         /*如果遍历到最后一个*/
                //         if( index + 1 == checkLength ){
                //             /*那么就把第一个全选按钮选中*/
                //             $("#ids_check_btn").prop("checked", true);
                //         }
                //     }else{
                //         /*不是选中状态就将第一个按钮取消选中*/
                //         $("#ids_check_btn").prop("checked", false);
                //         /*跳出循环*/
                //         return false;
                //     }
                // });
            });

            /**
                删除多个用户按钮的点击事件
             */
            $("#delete_ids_btn").click(function(){
                /*发送ajax请求*/
                $.ajax({
                   url:"${pageContext.request.contextPath}/emp/deleteAll",
                   type:"POST",
                   data:$("#ids_form").serialize(),
                   success:function (result) {
                       alert(result.message);
                       /*重新发起请求更新页面*/
                       ajaxPost(currentNum);
                       /*多选按钮不勾选*/
                       $("#ids_check_btn").prop("checked", false);
                   }
                });
            });


        });
    </script>

</head>
<body>


    <%--"编辑"按钮的模态--%>
    <div class="modal fade" id="update_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel2">更新</h4>
                </div>
                <div class="modal-body">
                    <%--员工填写回显--%>
                    <form class="form-horizontal" id="update_emp_form">
                        <%--员工姓名--%>
                        <div class="form-group">
                            <label for="empName_update_input" class="col-sm-2 control-label">empName</label>
                            <div class="col-sm-10">
                                <p class="form-control-static" id="empName_update_input"></p>
                            </div>
                        </div>
                        <%--员工性别--%>
                        <div class="form-group">
                            <label for="genderMan" class="col-sm-2 control-label">gender</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="update_genderMan" value="男"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="update_genderWoman" value="女"> 女
                                </label>
                            </div>
                        </div>
                        <%--员工邮箱--%>
                        <div class="form-group">
                            <label for="empEmail_update_input" class="col-sm-2 control-label">empEmail</label>
                            <div class="col-sm-10">
                                <input type="email" name="email" class="form-control" id="empEmail_update_input">
                            </div>
                        </div>
                        <%--员工职位--%>
                        <div class="form-group">
                            <label for="dept_update_name" class="col-sm-2 control-label">deptName</label>
                            <div class="col-sm-4">
                                <select class="form-control" name="dId" id="dept_update_name">
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="update_submit_btn">更新</button>
                </div>
            </div>
        </div>
    </div>


    <%--"新增"按钮的模态--%>
    <div class="modal fade" id="insert_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加员工</h4>
                </div>
                <div class="modal-body">
                    <%--员工填写表单--%>
                    <form class="form-horizontal" id="insert_emp_form">
                        <%--员工姓名--%>
                        <div class="form-group">
                            <label for="empName_input" class="col-sm-2 control-label">empName</label>
                            <div class="col-sm-10">
                                <input type="text" name="empName" class="form-control" id="empName_input" placeholder="empName">
                            </div>
                        </div>
                        <%--员工性别--%>
                        <div class="form-group">
                            <label for="genderMan" class="col-sm-2 control-label">gender</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="genderMan" value="男" checked="checked"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="genderWoman" value="女"> 女
                                </label>
                            </div>
                        </div>
                        <%--员工邮箱--%>
                        <div class="form-group">
                            <label for="empEmail_input" class="col-sm-2 control-label">empEmail</label>
                            <div class="col-sm-10">
                                <input type="email" name="email" class="form-control" id="empEmail_input" placeholder="empEmail">
                            </div>
                        </div>
                        <%--员工职位--%>
                            <div class="form-group">
                                <label for="dept_name" class="col-sm-2 control-label">deptName</label>
                                <div class="col-sm-4">
                                    <select class="form-control" name="dId" id="dept_name">
                                    </select>
                                </div>
                            </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="insert_submit_btn">提交</button>
                </div>
            </div>
        </div>
    </div>


    <%--页面内容板块--%>
    <div class="container">
        <%--标题--%>
        <div class="col-md-12">
            <h1>SSM_CRUD</h1>
        </div>
        <%--增删按钮--%>
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary" id="insert_model_btn">新增</button>
            <button class="btn btn-danger" id="delete_ids_btn">删除</button>
        </div>
        <%--数据表格--%>
        <div class="col-md-12">
            <form id="ids_form">
                <table class="table table-hover" id="show_emp_info">
                    <%--表头--%>
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="ids_check_btn"></th>
                            <th>#</th>
                            <th>empName</th>
                            <th>gender</th>
                            <th>empEmail</th>
                            <th>deptName</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <%--表内容体--%>
                    <tbody>
                    </tbody>
                </table>
            </form>
        </div>
        <%--分页情况--%>
        <div class="col-md-12">
            <%--分页信息--%>
            <div class="col-md-4" id="div_pageInfo">
            </div>
            <%--分页条--%>
            <div class="col-md-4 col-md-offset-4" id="nav_pageInfo">
            </div>
        </div>
    </div>

    <%--封装初始化页面数据的方法--%>
    <script>
        /**
         发送ajax请求的函数
         */
        function ajaxPost(pageNum){
            $.ajax({
                url:"${pageContext.request.contextPath}/emp/findPageInfo",
                data:"pageNum=" + pageNum,
                type:"GET",
                success:function (result) {
                    /*一旦重新请求就把多选按钮的选中状态去掉*/
                    $("#ids_check_btn").prop("checked", false);
                    /*获取表格中需要的内容信息*/
                    build_table_emp(result);
                    /*分页信息展示*/
                    build_page_info(result);
                    /*分页条展示*/
                    build_nav_info(result);
                }
            });
        }

        /**
         将信息放到表格中展示
         */
        function build_table_emp(result){
            /*每次要进行更新数据就要清空表格信息*/
            $("#show_emp_info tbody").empty();
            var pageInfo = result.data.pageInfo;
            /*遍历循环获取list对象*/
            $.each(result.data.pageInfo.list, function (index, item) {
                /*多选按钮*/
                var checkBtn = $("<td></td>").append(
                                $("<input>").attr("type", "checkbox").attr("name", "ids")
                                    .attr("value", item.empId).addClass("id_check_btn")
                            );
                /*显示id*/
                var empIdtd = $("<td></td>").append(item.empId);
                /*显示索引*/
                // var empIdtd = $("<td></td>").append( ( (pageInfo.pageNum - 1) * pageInfo.pageSize + index + 1) );
                var empNametd = $("<td></td>").append(item.empName);
                var gendertd = $("<td></td>").append(item.gender);
                var emailtd = $("<td></td>").append(item.email);
                var deptNametd = $("<td></td>").append(item.department.deptName);
                /*两个按钮
                    <button class="btn btn-primary btn-sm">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                        修改
                    </button>
                    <button class="btn btn-danger btn-sm">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                        删除
                    </button>
                */
                var btntd = $("<td></td>")
                    .append(
                        /*修改按钮*/
                        $("<button></button>")
                            .addClass("btn btn-primary btn-sm update_emp_btn")
                            .attr("emp-id", item.empId)       // 给编辑按钮自定义属性, 存放用户的id
                            .append( $("<span></span>").addClass("glyphicon glyphicon-pencil") )
                            .append("编辑")
                    ).append(
                        "&nbsp;"
                    ).append(
                        /*删除按钮*/
                        $("<button></button>")
                            .addClass("btn btn-danger btn-sm delete_emp_btn")
                            .attr("emp-id", item.empId)     // 自定义属性， 存放用户的id信息
                            .attr("emp-name", item.empName) // 自定义属性， 存放用户的名字
                            .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                            .append("删除")
                    );
                $("<tr></tr>")
                    .append(checkBtn)
                    .append(empIdtd)
                    .append(empNametd)
                    .append(gendertd)
                    .append(emailtd)
                    .append(deptNametd)
                    .append(btntd)
                    .appendTo($("#show_emp_info tbody"));
            });

        }

        /**
         将分页信息展示到表格中
         */
        function build_page_info(result){
            /*信息展示前先清空数据*/
            $("#div_pageInfo").empty();
            /*获取数据中的页面信息*/
            var pageInfo = result.data.pageInfo;
            /*给全局变量total赋值*/
            total = pageInfo.total;
            currentNum = pageInfo.pageNum;
            /*将信息展示到页面中*/
            $("#div_pageInfo").append("当前第" + pageInfo.pageNum + "/" +
                pageInfo.pages + "页 共" + pageInfo.total + "条数据");
        }

        /**
         将请求放在分页条中
         */
        function build_nav_info(result){
            /*每次创建都要清空*/
            $("#nav_pageInfo").empty();
            /*遍历数据
                <nav aria-label="Page navigation">
                  <ul class="pagination">
                    <li>
                      <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                      <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
            */
            /*获取数据信息*/
            var pageInfo = result.data.pageInfo;
            /*ul*/
            var ulPage = $("<ul></ul>")
                .addClass("pagination");
            /**首页, 追加class属性通过三目运算进行判断
             如果当前是第一页, 那么就禁用*/
            var firstPage = $("<li></li>")
                .append( $("<a></a>").append("首页") )
                .addClass( pageInfo.isFirstPage == true ? "disabled" : "" );
            /*先对此页进行判断：
                如果此页是第一页， 那么就不添加点击事件*/
            if( !pageInfo.isFirstPage ) {
                /*添加鼠标点击事件*/
                firstPage.click(function () {
                    /*跳转首页数据*/
                    ajaxPost(1);
                });
            }
            ulPage.append(firstPage);
            /**上一页, 追加class属性通过三目运算进行判断*/
            var prePage = $("<li></li>")
                .append( $("<a></a>").append("&laquo;") )
                .addClass( pageInfo.hasPreviousPage == false ? "disabled" : "" );
            /*先对此页进行判断：
                如果此页没有上一页， 那么就不添加点击事件*/
            if( pageInfo.hasPreviousPage ) {
                /*添加鼠标点击事件*/
                prePage.click(function () {
                    /*跳转上一页数据*/
                    ajaxPost( pageInfo.prePage );
                });
                /*有上一页才展示这个按钮*/
                ulPage.append(prePage);
            }
            /**遍历页码*/
            $.each(pageInfo.navigatepageNums, function(index, item){
                /*页码, 追加class属性通过三目运算进行判断*/
                var pages = $("<li></li>")
                    .append( $("<a></a>").append(item) )
                    .addClass( pageInfo.pageNum == item ? "active" : "" );
                /*添加鼠标点击事件*/
                pages.click(function () {
                    /*跳转对应页码的数据*/
                    ajaxPost( item );
                });
                ulPage.append(pages);
            });
            /**下一页, 追加class属性通过三目运算进行判断*/
            var nextPage = $("<li></li>")
                .append( $("<a></a>").append("&raquo;") )
                .addClass( pageInfo.hasNextPage == false ? "disabled" : "" );
            /*先对此页进行判断：
                如果此页没有下一页， 那么就不添加点击事件*/
            if( pageInfo.hasNextPage ) {
                /*添加鼠标点击事件*/
                nextPage.click(function () {
                    /*跳转下一页数据*/
                    ajaxPost( pageInfo.nextPage );
                });
                /*有下一页才展示这个按钮*/
                ulPage.append(nextPage);
            }
            /**尾页, 追加class属性通过三目运算进行判断*/
            var lastPage = $("<li></li>")
                .append( $("<a></a>").append("尾页") )
                .addClass( pageInfo.isLastPage == true ? "disabled" : "" );
            /*先对此页进行判断：
                如果此页是尾页， 那么就不添加点击事件*/
            if( !pageInfo.isLastPage ) {
                /*添加鼠标点击事件*/
                lastPage.click(function () {
                    /*跳转尾页数据*/
                    ajaxPost( pageInfo.pages );
                });
            }
            ulPage.append(lastPage);
            /*展示到页面中*/
            $("<nav></nav>").append(
                ulPage
            ).appendTo( $("#nav_pageInfo") );
        }
    </script>
</body>
</html>
